<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器案例</title>
	</head>
	<body>
		
		<div id="app">
			<h1>求和计算</h1>
			<div>
				<div>
					数据A：<input type="text" name="num1" v-model="num1"/>
				</div>
				<div>
					数据B：<input type="text" name="num2" v-model="num2"/>
					&nbsp &nbsp<button type="button" @click="count">计算</button>
				</div>
				<div>结果:<span v-text="result"></span></div>
			</div>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
				const app = new Vue({
					el : "#app",
					data : {
						num1 : '',
						num2 : '',
						result : ''
					},
					methods:{
						count(){
							this.result = parseInt(this.num1) + parseInt(this.num2);
							//this.result = eval(this.num1) + eval(this.num2)
						}
					}
				})
		</script>
	</body>
</html>
